吃了一天的藥，感冒還沒好轉。
一整天從頭到腳都微微發麻，在公司像個喪屍一樣。

大家有沒有這種經驗，開始工作後，實務上的專案開發流程和我們想的不一樣。
以往都是一個專案、網站開一個資料夾，但實際上可能會遇到：

• 前台、後台放一起，但分開打包。
• 多個前台專案，樣式相同、部分內容不同、分開打包。
• 前台、後台放一起，樣式、商業邏輯不同，但有共同的功能要共用。
  ......等各種不同的狀況。

為了解決此方案，業界常見的做法有「Monorepo」。
而在 Angular 則是有 「Angular Workspace」來建立「多個專案工作區」

例如，今天的專案要求要有：「PC 版、APP 版，樣式不同、分開打包、但要有共同的 todolist 邏輯的專案」，便可以開一個 Workspace(工作區)。
針對此需求，我們的檔案目錄會長這樣：

my-company-workspace/
├── angular.json                     # 總配置檔 (管理 desktop, mobile, shared-core)
├── tsconfig.json                    # 全域 TypeScript 設定 (含路徑別名)
├── package.json                     # 兩邊共用的 npm dependencies
│
└── projects/
    ├── desktop/                     # 🖥️ 桌機版專案 (獨立運作)
    │   ├── src/
    │   │   ├── app/
    │   │   │   ├── core/            # 桌機專屬 core (TitleStrategy, Desktop SSO)
    │   │   │   ├── features/        # 桌機專屬 UI
    │   │   │   ├── app.config.ts    # 桌機專屬 Provider
    │   │   │   └── app.routes.ts    # 桌機專屬 Route
    │   │   └── styles.scss          # 桌機專屬樣式
    │   └── tsconfig.app.json
    │
    ├── mobile/                      # 📱 行動版專案 (獨立運作 / 未來包 Capacitor)
    │   ├── src/
    │   │   ├── app/
    │   │   │   ├── core/            # 行動版專屬 core
    │   │   │   ├── features/        # 行動版專屬 UI
    │   │   │   ├── app.config.ts    # 行動版專屬 Provider
    │   │   │   └── app.routes.ts    # 行動版專屬 Route
    │   │   └── styles.scss          # 行動版專屬樣式
    │   └── tsconfig.app.json
    │
    └── shared-core/                 # 📦 兩端共用的 Library
    │   ├── src/
    │   │   ├── lib/
    │   │   │   ├── models/          # 共用 TypeScript Interfaces / Enums
    │   │   │   └── utils/           # 共用工具函式 (如 日期處理、加密)
    │   │   └── public-api.ts        # 匯出點 (開放給 desktop/mobile 引用的 API)
    │   └── tsconfig.lib.json
    │
    └── shared-todo/                  # 📦 獨立的 To-Do List 功能 Library
        └── src/
            ├── lib/
            │   ├── components/
            │   │   └── todo-main/    # 包含 HTML/SCSS/TS 的 Standalone Component
            │   ├── services/         # todo.service.ts
            │   └── todo.routes.ts    # 若需獨立路由也可以寫在這
            └── public-api.ts         # 對外匯出 Component 或 Routes

建立 WorkSpace 步驟：

1. 在終端機執行 ng new 並帶入 --no-create-application 參數，這樣會建立一個空的根目錄，專門用來存放多個專案：

npx @angular/cli@latest new my-company-workspace --no-create-application --defaults
cd my-company-workspace

2. 建立 PC 版與 APP 版的專案

# 建立桌機版 App
ng g application desktop --routing --style=scss --standalone

# 建立行動版 App
ng g application mobile --routing --style=scss --standalone

3. 3.建立共用程式庫 (Shared Library)

ng g library shared-core
ng g library shared-todo

4. 在 desktop 或 mobile 直接引用

// projects/desktop/src/app/features/auth/services/desktop-auth.service.ts
import { Injectable } from '@angular/core';
import { UserProfile } from 'shared-todo'; // 👈 直接從 shared-todo 引入！

@Injectable({ providedIn: 'root' })
export class DesktopAuthService{
  currentUser: UserProfile | null = null;
}

如此一來就大功大成啦！

• 參考資料：https://dev.angular.tw/reference/configs/file-structure#multiple-projects